<template>
  <div class="admin-layout">
    <el-container>
      <el-aside width="200px">
        <div class="logo">园区管理平台</div>
        <el-menu
          :default-active="activeMenu"
          router
          background-color="#f4f6f8"
          text-color="#4a5568"
          active-text-color="#5b9bd5">
          <el-menu-item index="/admin">
            <el-icon><HomeFilled /></el-icon>
            <span>工作台</span>
          </el-menu-item>
          <el-sub-menu index="/admin/personnel">
            <template #title>
              <el-icon><UserFilled /></el-icon>
              <span>人员管理</span>
            </template>
            <el-menu-item index="/admin/personnel/company">公司管理</el-menu-item>
            <el-menu-item index="/admin/personnel/company-employee">企业员工管理</el-menu-item>
            <el-menu-item index="/admin/personnel/park-employee">物业员工管理</el-menu-item>
            <el-menu-item index="/admin/personnel/visitor">访客管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/admin/assets">
            <template #title>
              <el-icon><Grid /></el-icon>
              <span>资产管理</span>
            </template>
            <el-menu-item index="/admin/assets/BuildingList">空间管理</el-menu-item>
            <el-menu-item index="/admin/assets/EquipmentList">设备管理</el-menu-item>
            <el-menu-item index="/admin/assets/VehicleList">车辆管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/admin/services">
            <template #title>
              <el-icon><Service /></el-icon>
              <span>服务管理</span>
            </template>
            <el-menu-item index="/admin/services/repair">维修管理</el-menu-item>
            <el-menu-item index="/admin/services/leasing">租赁申请</el-menu-item>
            <el-menu-item index="/admin/services/decoration">装修备案</el-menu-item>
            <el-menu-item index="/admin/services/visitor">访客预约</el-menu-item>
            <el-menu-item index="/admin/services/water">送水服务</el-menu-item>
            <el-menu-item index="/admin/services/cleaning">保洁服务</el-menu-item>
            <el-menu-item index="/admin/services/temporary-parking">临时停车</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/admin/finance">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>财务管理</span>
            </template>
            <el-menu-item index="/admin/finance/contracts">合同管理</el-menu-item>
            <el-menu-item index="/admin/finance/bills">账单管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/admin/notification">
            <template #title>
              <el-icon><Message /></el-icon>
              <span>通知管理</span>
            </template>
            <el-menu-item index="/admin/notifications/drafts">发布通知</el-menu-item>
            <el-menu-item index="/admin/notifications/list">历史记录</el-menu-item>
            <el-menu-item index="/admin/notifications/feedback">问题反馈</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/admin/analytics">
            <template #title>
              <el-icon><DataLine /></el-icon>
              <span>数据分析</span>
            </template>
            <el-menu-item index="/admin/analytics/screen">数据大屏</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      
      <el-container>
        <el-header>
          <div class="header-right">
            <span>{{ userInfo.username }}</span>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-icon><Setting /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { 
  HomeFilled, 
  UserFilled, 
  Grid, 
  Document, 
  Service, 
  Setting,
  Message,
  DataLine
} from '@element-plus/icons-vue'

export default {
  name: 'AdminLayout',
  components: {
    HomeFilled,
    UserFilled,
    Grid,
    Document,
    Service,
    Setting,
    Message,
    DataLine
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    
    const userInfo = computed(() => store.state.userInfo)
    const activeMenu = computed(() => route.path)
    
    const handleCommand = (command) => {
      if (command === 'logout') {
        store.dispatch('logout')
        router.push('/login')
      } else if (command === 'profile') {
        // 跳转到个人信息页
      }
    }
    
    return {
      userInfo,
      activeMenu,
      handleCommand
    }
  }
}
</script>

<style scoped>
.admin-layout {
  height: 100%;
}

.el-container {
  height: 100%;
}

.el-aside {
  background-color: #f4f6f8;
  color: #4a5568;
}

.el-header {
  background-color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
}

.logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
  color: #4a5568;
  background-color: #f4f6f8;
  font-weight: bold;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-right span {
  /* Removed margin-right as gap handles it */
}

.el-dropdown-link {
  cursor: pointer;
  color: #606266;
  font-size: 18px;
}

.el-menu {
  border-right: none;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background-color: rgba(64, 158, 255, 0.08) !important;
  color: #5b9bd5 !important;
}

:deep(.el-menu-item.is-active) {
  background-color: rgba(64, 158, 255, 0.15) !important;
  color: #ffffff !important;
}

:deep(.el-sub-menu__title.is-active) {
  background-color: rgba(64, 158, 255, 0.08) !important;
  color: #5b9bd5 !important;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
    height: 50px;
    line-height: 50px;
    padding-left: 20px !important;
}

:deep(.el-menu--inline .el-menu-item) {
    padding-left: 50px !important;
}
</style> 